import React, { useState } from "react";
import { View } from "@tarojs/components";
import classNames from "classnames";

import "./index.scss";

interface Iprops {
  children?: React.ReactNode;
}

const Index: React.FC<Iprops> = (props: Iprops, ref) => {
  const [visible, setVisible] = useState(false);
  const show = () => {
    console.log("show");
    setVisible(true);
  };

  const hide = (e) => {
    setVisible(false);
  };

  React.useImperativeHandle(ref, () => ({
    show,
    hide,
  }));

  return (
    <View
      className={classNames("at-float-modal", {
        "at-float-modal--active": visible,
      })}
    >
      <View className="at-float-modal__overlay" onClick={hide}></View>
      <View className="at-float-modal__container layout">{props.children}</View>
    </View>
  );
};

export default React.forwardRef(Index);
